#app4{
    display: flex;
    justify-content: center;
    align-items: center;
}
#app4 > .circle{
    height: 25vw;
    width: 25vw;
    border: 1px solid rgba(158,51,121,1);
    border-radius: 50%;
}
#app4 > .circle.active{
    animation: change 1s infinite alternate linear;
}

@keyframes change  {
    0%{
        background: rgb(180,176,144);
        background: radial-gradient(circle, rgba(180,176,144,1) 0%, rgba(74,73,84,1) 50%, rgba(89,230,79,1) 100%);
    }
    100%{
        background: rgb(89,230,79);
        background: radial-gradient(circle, rgba(89,230,79,1) 0%, rgba(74,73,84,1) 50%, rgba(180,176,144,1) 100%);
    }

}